<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1. HTML -->
    <table>

    </table>

    <script>

        const userList = [
            {
                username: '张三',
                subject: 'JavaScript',
                score: 100,
            },
            {
                username: '李四',
                subject: 'C++',
                score: 120,
            },
            {
                username: '王五',
                subject: 'Java',
                score: 90,
            },
            {
                username: '房云川',
                subject: 'Python',
                score: 80,
            },
        ];

        const table = document.querySelector('table');

        // for (const user of userList) {
        //     const tr = document.createElement('tr');

        //     // 循环对象
        //     for (const key in user) {
        //         const value = user[key]; // '张三'  'JavaScript'  100
        //         const td = document.createElement('td');
        //         td.innerText = value;
        //         tr.appendChild(td);
        //     }

        //     const td = document.createElement('td');
        //     const a = document.createElement('a');
        //     a.addEventListener('click', function () {
        //         tr.remove();
        //     });
        //     a.setAttribute('href', '');
        //     a.innerText = '删除';
        //     td.appendChild(a);
        //     tr.appendChild(td);

        //     table.appendChild(tr);
        // }

        let htmlTotal = `
            <tr>
                <th>姓名</th>
                <th>学科</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        `;

        for (const user of userList) {
            const htmlStr = `
                <tr>
                    <td>${ user.username }</td>
                    <td>${ user.subject }</td>
                    <td>${ user.score }</td>
                    <td>
                        <a href="">删除</a>
                    </td>
                </tr>
            `;
            htmlTotal += htmlStr;
        }

        table.innerHTML = htmlTotal;

        const delBtns = document.querySelectorAll('a');

        for (const a of delBtns) {
            a.addEventListener('click', function (e) {
                // 阻止默认行为
                e.preventDefault();
                a.parentNode.parentNode.remove();
            });
        }


    </script>

</body>
</html>